<style scoped lang="scss">
.left {
    overflow-y: scroll;
    width: 100px;

    .left-item {
        text-align: center;
        align-items: center;
        width: 100px;
        height: 60px;
        line-height: 60px;

        &.active {
            border-left: 4px solid red;
        }
    }

}

.right {
    overflow-y: scroll;
    flex: 1;

    .span1 {
        display: flex;
        flex-wrap: wrap;

        span {
            width: 50%;
            line-height: 80px;
            text-align: center;
        }
    }
}

.left1 {
    overflow-y: scroll;
    width: 100px;

    .left-item1 {
        text-align: center;
        align-items: center;
        width: 100px;
        height: 60px;
        line-height: 60px;

        &.active {
            border-left: 4px solid red;
        }
    }

}

.right1 {
    overflow-y: scroll;
    flex: 1;
    .span1{
        display: flex;
        flex-wrap: wrap;
        dl{
            width: 50%;
            line-height: 40px;
            text-align: center;
        }
    }
}
.div1 {
    display: flex;
    justify-content: space-between;

    .icon1 {
        font-size: 30px;
        margin: 10px;
    }
}
</style>
<template>
    <div>
        <div class="div1">
            <van-icon class="icon1" name="manager" @click="onicon1" />

            <van-icon class="icon1" name="flower-o" />
        </div>
        <van-tabs>
            <van-tab title="常见病症">
                <div style="display: flex;height: 800px;">
                    <div class="left">
                        <div class="left-item" v-for="(item, index) in TabsData" :key="index"
                            :class="activeIndex == index ? 'active' : ''" @click="activeIndex = index">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="right" v-if="TabsData.length" @click="ondiseaseDetail">
                        <span class="span1">
                            <template v-for="(item, index) in TabsData[activeIndex].children" :key="index">
                                <span>{{ item.title }}</span>
                            </template>
                        </span>
                    </div>
                </div>
            </van-tab>
            <van-tab title="常用药品">
                <div style="display: flex;height: 800px;">
                    <div class="left1">
                        <div class="left-item1" v-for="(item, index) in TabData" :key="index"
                            :class="activeIndex == index ? 'active' : ''" @click="activeIndex = index">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="right1" v-if="TabData.length">
                        <span class="span1">
                            <dl v-for="(item, index) in TabData[activeIndex].children" :key="index">
                                <dt>
                                    <img style="width: 80px;height: 80px;" :src="item.image" alt="">
                                </dt>
                                <dd>
                                    <span style="font-size: 10px;">{{ item.title }}</span>
                                </dd>
                            </dl>
                        </span>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script setup lang="ts">
import { request } from '@/axios/request';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const activeIndex = ref(0)
const TabsData = ref([])
const getTabsData = async () => {
    const res = await request.get('/api/list')
    TabsData.value = res.data.data
    // console.log(TabsData.value);
}
getTabsData()
const router = useRouter()
const TabData = ref([])
const getTabData = async () => {
    const res = await request('/api/item')
    TabData.value = res.data.data
    console.log(TabData.value);
}
getTabData()
const ondiseaseDetail=()=>{
    router.push('/diseaseDetail')
}
const onicon1 = () => {
    router.push('/my')
}
</script>